<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jstl/core" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:converge="http://com.interactivemediamanagement.converge/tags">

    <converge:moduleHeader moduleTitle="#{msgs.newsitem_WORKFLOW_HISTORY}" />
    <div>
        <rich:dataTable id="dtWorkflowHistory" value="#{value.history}" var="history" styleClass="table no-table-header" rowClasses="odd, even" style="width: 96%; margin-left: 2%; margin-right: 2%">

            <rich:column styleClass="left" sortOrder="ASCENDING" sortBy="#{history.timestamp}" selfSorted="false">
                <h:outputText value="#{history.timestamp.time}">
                    <f:convertDateTime pattern="#{msgs.FORMAT_DATE_AND_TIME}" timeZone="#{userSession.user.timeZone}" />
                </h:outputText>
            </rich:column>

            <rich:column styleClass="left">
                <h:outputText value="#{history.state.name}" />
                <rich:toolTip styleClass="tooltip" rendered="#{history.comment != ''}">
                    <h:panelGrid>
                        <h:outputText value="Message from #{history.user.fullName}" style="font-weight: bold;" escape="false" />
                        <h:outputText value="#{history.comment}" escape="false" />
                    </h:panelGrid>
                </rich:toolTip>
            </rich:column>

            <rich:column styleClass="center columnIcon">
                <a4j:commandLink ajaxSingle="true" reRender="mpShowWorkflowStateTransition">
                    <f:setPropertyActionListener value="#{history}" target="#{newsItem.selectedWorkflowStateTransition}" />
                    <rich:componentControl event="oncomplete" for="mpShowWorkflowStateTransition" operation="show" />
                    <h:graphicImage title="#{msgs.ARTICLE_VIEW_PREVIOUS_VERSION_TOOLTIP}" alt="#{msgs.ARTICLE_VIEW_PREVIOUS_VERSION_TOOLTIP}" value="/images/template/icons/examine.gif" />
                </a4j:commandLink>
            </rich:column>
        </rich:dataTable>

        <rich:modalPanel id="mpShowWorkflowStateTransition" autosized="true" domElementAttachment="parent">
            <f:facet name="header">
                <h:panelGroup>
                    <h:outputText value="#{msgs.newsitem_WORKFLOW_HISTORY}"></h:outputText>
                </h:panelGroup>
            </f:facet>
            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage id="imgCloseShowWorkflowTransitionState" value="#{res.DIALOGUE_CLOSE_ICON}" style="link" />
                    <rich:componentControl for="mpShowWorkflowStateTransition" attachTo="imgCloseShowWorkflowTransitionState" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>

            <h:panelGrid style="width: 480px;">

                <rich:tabPanel id="tpWorkflowTransition" switchType="client" activeTabClass="tabActive" inactiveTabClass="tabInactive">

                    <rich:tab label="#{msgs.newsitem_WORKFLOW_HISTORY}">
                        <h:panelGrid columnClasses="tabSheet" styleClass="tabSheetGrid" rendered="#{newsItem.selectedWorkflowStateTransition != null}">
                            <h:outputText value="#{msgs.newsitem_STATE}" styleClass="bold" />
                            <h:inputText value="#{newsItem.selectedWorkflowStateTransition.state.name}" disabled="true" style="width: 100%" styleClass="text" />

                            <h:outputText value="#{msgs.newsitem_ACTOR}" styleClass="bold" />
                            <h:inputText value="#{newsItem.selectedWorkflowStateTransition.user.fullName}" disabled="true" style="width: 100%" styleClass="text" />

                            <h:outputText value="#{msgs.DATE}" styleClass="bold" />
                            <h:inputText value="#{newsItem.selectedWorkflowStateTransition.timestamp.time}" disabled="true" style="width: 100%" styleClass="text">
                                <f:convertDateTime pattern="#{msgs.FORMAT_DATE_AND_TIME}" timeZone="#{userSession.user.timeZone}" />
                            </h:inputText>

                            <h:outputText value="#{msgs.newsitem_HEADLINE}" styleClass="bold" />
                            <h:inputText value="#{newsItem.selectedWorkflowStateTransition.headlineVersion}" disabled="true" style="width: 100%" styleClass="text" />
                        </h:panelGrid>
                    </rich:tab>

                    <rich:tab label="#{msgs.newsitem_BRIEF}">
                        <h:panelGrid columnClasses="tabSheet" styleClass="tabSheetGrid" rendered="#{newsItem.selectedWorkflowStateTransition != null}">
                            <rich:editor readonly="true" value="#{newsItem.selectedWorkflowStateTransition.briefVersion}" height="50" theme="advanced" skin="default">
                                <f:param name="width" value="100%" />
                                <f:param name="theme_advanced_buttons1" value=""/>
                                <f:param name="theme_advanced_buttons2" value=""/>
                                <f:param name="theme_advanced_buttons3" value=""/>
                            </rich:editor>
                        </h:panelGrid>
                    </rich:tab>

                    <rich:tab label="#{msgs.newsitem_STORY}">
                        <h:panelGrid columnClasses="tabSheet" styleClass="tabSheetGrid" rendered="#{newsItem.selectedWorkflowStateTransition != null}">
                            <rich:editor readonly="true" value="#{newsItem.selectedWorkflowStateTransition.storyVersion}" height="200" theme="advanced" skin="default">
                                <f:param name="width" value="100%" />
                                <f:param name="theme_advanced_buttons1" value=""/>
                                <f:param name="theme_advanced_buttons2" value=""/>
                                <f:param name="theme_advanced_buttons3" value=""/>
                            </rich:editor>
                        </h:panelGrid>
                    </rich:tab>

                </rich:tabPanel>

                <h:panelGroup styleClass="dialogueButtons">
                    <a4j:commandLink id="lnkUseStory" onclick="if (confirm('#{msgs.newsitem_REPLACE_STORY_PROMPT}') != true){ return false; };" actionListener="#{newsItem.onReplaceStory}" styleClass="dialogButton" value="#{msgs.newsitem_REPLACE_STORY}" reRender="edStory" ajaxSingle="true" rendered="#{newsItem.currentActor &amp;&amp; !newsItem.readOnly }" />
                    <a4j:commandLink id="lnkUseBrief" onclick="if (confirm('#{msgs.newsitem_REPLACE_BRIEF_PROMPT}') != true){ return false; };" actionListener="#{newsItem.onReplaceBrief}" styleClass="dialogButton" value="#{msgs.newsitem_REPLACE_BRIEF}" reRender="txtNewsItemBrief" ajaxSingle="true" rendered="#{newsItem.currentActor &amp;&amp; ! newsItem.readOnly}" />
                    <a4j:commandLink id="lnkUseHeadline" onclick="if (confirm('#{msgs.newsitem_REPLACE_HEADLINE_PROMPT}') != true){ return false; };" actionListener="#{newsItem.onReplaceHeadline}" styleClass="dialogButton" value="#{msgs.newsitem_REPLACE_HEADLINE}" reRender="txtNewsItemHeadline" ajaxSingle="true" rendered="#{newsItem.currentActor &amp;&amp; !newsItem.readOnly}" />
                    <h:commandLink id="lnkCloseWorkflowTransitionState" styleClass="dialogButton" value="#{msgs.CLOSE}" onclick="#{rich:component('mpShowWorkflowStateTransition')}.hide(); return false;" />
                </h:panelGroup>

            </h:panelGrid>
        </rich:modalPanel>
    </div>

    <div style="clear: both; padding-bottom: 12px;"></div>

</ui:composition>